<template>
  <div class="manage">
    <el-dialog :title="operateType === 'add' ? '新增用户' : '更新用户'" :visible.sync="isShow">
      <common-form :formLabel="operateFormLabel" :form="operateForm" ref="form"></common-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="isShow = false">取 消</el-button>
        <el-button type="primary" @click="confirm">确 定</el-button>
      </div>
    </el-dialog>
    <div class="manage-header">
      <el-button type="primary" @click="addUSer">+新建</el-button>
      <common-form inline :formLabel="formLabel" :form="searchForm">
        <el-button type="primary" @click="getList(searchForm.keyword)">搜索</el-button>
      </common-form>
    </div>
    <common-table :tabelData="tabelData" :tabelLabel="tabelLabel" :config="config" @changePage="getList"
      @edit="editUser" @del="delUser">
    </common-table>
  </div>
</template>
<script>
  import CommonForm from '@/components/CommonForm'
  import CommonTable from '@/components/CommonTable'
  export default {
    components: {
      CommonForm,
      CommonTable
    },
    data() {
      return {
        operateType: 'add',
        isShow: false,
        tabelData: [],
        tabelLabel: [
          {
            prop: 'name',
            label: '姓名'
          },
          {
            prop: 'age',
            label: '年龄'
          },
          {
            prop: 'sexLabel',
            label: '性别'
          },
          {
            prop: 'birth',
            label: '出生日期',
            width: 200
          },
          {
            prop: 'addr',
            label: '地址',
            width: 320
          }],
        config: {
          page: 1,
          total: 30,
          loading: false,
        },
        searchForm: {
          keyword: ''
        },
        formLabel: [
          {
            model: 'keyword',
            label: ''
          }
        ],
        operateForm: {
          name: '',
          addr: '',
          age: '',
          birth: '',
          sex: ''
        },
        operateFormLabel: [
          {
            model: 'name',
            label: '姓名'
          },
          {
            model: 'age',
            label: '年龄'
          },
          {
            model: 'sex',
            label: '性别',
            type: 'select',
            opts: [
              {
                label: '男',
                value: 1
              },
              {
                label: '女',
                value: 0
              }
            ]
          },
          {
            model: 'birth',
            label: '出生日期',
            type: 'date'
          },
          {
            model: 'addr',
            label: '地址'
          }
        ],
      }
    },
    created() {
      this.getList()
    },
    methods: {
      getList(name) {
        this.config.loading = true    //首先让这个参数等于true       告诉用户数据获取中
        this.$http.get('/api/user/getUser', {
          params: {
            page: this.config.page,
            name
          }
        }).then(res => {
          this.tabelData = res.data.list.map(item => {  //因为返回的sex是0或1  需要处理下
            item.sexLabel = item.sex === 0 ? '女' : '男'
            return item
          })
          this.config.total = res.data.count
          this.config.loading = false
        })
      },
      editUser(row) {
        this.operateType = 'edit'
        this.isShow = true   //布尔值   当为true弹出对话框   
        this.operateForm = row
      },
      addUSer() {
        this.isShow = true
        this.operateType = 'add'
        this.operateForm = {}
      },
      confirm() {
        if (this.operateType === 'edit') {
          this.$http.post('/api/user/edit', this.operateForm).then(res => {
            this.isShow = false
            this.getList()
          })
        } else {
          this.$http.post('/api/user/add', this.operateForm).then(res => {
            this.isShow = false
            this.getList()
          })
        }
      },
      delUser(row) {
        this.$confirm('此操作将永久删除, 是否继续?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          let id = row.id
          this.$http.get('/api/user/del', { params: { id } }).then(res => {
            this.$message({
              type: 'success',
              message: '删除成功!'
            })
            this.getList()
          })
        }).catch(() => {
          this.$message({
            type: 'info',
            message: '已取消删除'
          });
        });
      }
    },
  }
</script>
<style lang="scss" scoped>
  .manage {
    height: 90%;
    padding-bottom: 20px;
    overflow: hidden;
  }

  .manage-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
  }
</style>